<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安心银行 - 首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "微软雅黑", sans-serif;
            color: #333;
            scroll-behavior: smooth;
        }
        /* 导航栏样式 */
        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            transition: background-color 0.3s, box-shadow 0.3s;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .nav.scrolled {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .nav .logo {
            display: flex;
            align-items: center;
        }
        .nav .logo img {
            height: 30px;
            margin-right: 5px;
        }
        .nav .menu a {
            margin: 0 10px;
            text-decoration: none;
            color: #333;
            position: relative;
            transition: color 0.3s;
        }
        .nav .menu a:hover {
            color: #007bff;
        }
        .nav .menu a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #007bff;
            transition: width 0.3s;
        }
        .nav .menu a:hover::after {
            width: 100%;
        }
        .nav .btn-group a {
            margin-left: 10px;
            text-decoration: none;
            padding: 6px 12px;
            border-radius: 4px;
            transition: all 0.3s;
        }
        .nav .btn-login {
            color: #007bff;
            border: 1px solid #007bff;
        }
        .nav .btn-login:hover {
            background-color: #007bff;
            color: white;
        }
        .nav .btn-register {
            color: #fff;
            background-color: #007bff;
            border: 1px solid #007bff;
        }
        .nav .btn-register:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
        /*  banner 样式 */
        .banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 50px 20px;
            background: linear-gradient(to right, #0099ff, #66ccff);
            color: #fff;
            overflow: hidden;
            position: relative;
        }
        .banner .text h1 {
            font-size: 36px;
            margin-bottom: 20px;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease forwards;
            animation-delay: 0.2s;
        }
        .banner .text p {
            font-size: 16px;
            margin-bottom: 30px;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease forwards;
            animation-delay: 0.4s;
        }
        .banner .text .btn {
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 4px;
            margin-right: 10px;
            display: inline-block;
            transition: all 0.3s;
            transform: translateY(30px);
            opacity: 0;
        }
        .banner .text .btn-open {
            background-color: #fff;
            color: #007bff;
            animation: fadeUp 0.8s ease forwards;
            animation-delay: 0.6s;
        }
        .banner .text .btn-open:hover {
            background-color: #f0f0f0;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .banner .text .btn-more {
            background-color: transparent;
            color: #fff;
            border: 1px solid #fff;
            animation: fadeUp 0.8s ease forwards;
            animation-delay: 0.8s;
        }
        .banner .text .btn-more:hover {
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }
        .banner .img img {
            max-width: 400px;
            border-radius: 8px;
            transform: translateX(50px);
            opacity: 0;
            animation: fadeIn 1s ease forwards;
            animation-delay: 0.5s;
        }
        /* 基础服务样式 */
        .service {
            padding: 50px 20px;
            text-align: center;
            overflow: hidden;
        }
        .service h2 {
            font-size: 28px;
            margin-bottom: 20px;
            transform: translateY(30px);
            opacity: 0;
            transition: all 0.6s;
        }
        .service p {
            font-size: 16px;
            margin-bottom: 40px;
            color: #666;
            transform: translateY(30px);
            opacity: 0;
            transition: all 0.6s;
            transition-delay: 0.2s;
        }
        .service .list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        .service .item {
            background-color: #f8f9fa;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
            transform: translateY(30px);
            opacity: 0;
        }
        .service .item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .service .item i {
            font-size: 32px;
            color: #007bff;
            margin-bottom: 20px;
            transition: transform 0.3s;
        }
        .service .item:hover i {
            transform: scale(1.2);
        }
        .service .item h3 {
            font-size: 20px;
            margin-bottom: 10px;
        }
        .service .item p {
            font-size: 14px;
            color: #666;
            margin-bottom: 0;
        }

        /* 登录/注册模态框 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 200;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }
        .modal.active {
            opacity: 1;
            visibility: visible;
        }
        .modal-content {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            width: 90%;
            max-width: 400px;
            transform: scale(0.9);
            transition: transform 0.3s;
        }
        .modal.active .modal-content {
            transform: scale(1);
        }
        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-header h3 {
            font-size: 20px;
            font-weight: bold;
        }
        .close-modal {
            font-size: 24px;
            cursor: pointer;
            color: #666;
            transition: color 0.3s;
        }
        .close-modal:hover {
            color: #333;
        }
        .modal-body {
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        .form-group input:focus {
            outline: none;
            border-color: #007bff;
        }
        .form-group .error-message {
            color: #dc3545;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
        .form-group.error input {
            border-color: #dc3545;
        }
        .form-group.error .error-message {
            display: block;
        }
        .btn-submit {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .btn-submit:hover {
            background-color: #0056b3;
        }
        .form-footer {
            margin-top: 15px;
            text-align: center;
            font-size: 14px;
        }
        .form-footer a {
            color: #007bff;
            text-decoration: none;
            transition: color 0.3s;
        }
        .form-footer a:hover {
            color: #0056b3;
        }

        /* 动画效果 */
        @keyframes fadeUp {
            from {
                transform: translateY(30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        @keyframes fadeIn {
            from {
                transform: translateX(50px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* 滚动动画类 */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* 提示框样式 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            z-index: 300;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .toast.active {
            opacity: 1;
        }
    </style>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 导航栏滚动效果
            window.addEventListener('scroll', function() {
                const nav = document.querySelector('.nav');
                if (window.scrollY > 50) {
                    nav.classList.add('scrolled');
                } else {
                    nav.classList.remove('scrolled');
                }

                // 滚动动画
                revealElements();
            });

            // 滚动显示动画
            function revealElements() {
                const reveals = document.querySelectorAll('.reveal');
                const windowHeight = window.innerHeight;

                reveals.forEach(element => {
                    const elementTop = element.getBoundingClientRect().top;
                    const elementVisible = 150;

                    if (elementTop < windowHeight - elementVisible) {
                        element.classList.add('active');
                    }
                });
            }

            // 初始加载时检查元素位置
            revealElements();

            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();

                    const targetId = this.getAttribute('href');
                    if (targetId === '#') return;

                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        targetElement.scrollIntoView({
                            behavior: 'smooth'
                        });
                    }
                });
            });

            // 创建提示框
            const toast = document.createElement('div');
            toast.className = 'toast';
            document.body.appendChild(toast);

            // 显示提示框
            function showToast(message) {
                toast.textContent = message;
                toast.classList.add('active');
                setTimeout(() => {
                    toast.classList.remove('active');
                }, 2000);
            }

            // 登录/注册模态框
            const loginBtn = document.querySelector('.btn-login');
            const registerBtn = document.querySelector('.btn-register');
            const openAccountBtn = document.querySelector('.btn-open');
            const loginModal = document.getElementById('login-modal');
            const registerModal = document.getElementById('register-modal');
            const closeLoginModal = document.getElementById('close-login-modal');
            const closeRegisterModal = document.getElementById('close-register-modal');
            const switchToRegister = document.getElementById('switch-to-register');
            const switchToLogin = document.getElementById('switch-to-login');

            // 打开登录模态框
            if (loginBtn) {
                loginBtn.addEventListener('click', () => {
                    openModal(loginModal);
                });
            }

            // 打开注册模态框
            if (registerBtn) {
                registerBtn.addEventListener('click', () => {
                    openModal(registerModal);
                });
            }

            // 立即开户按钮（与注册相同）
            if (openAccountBtn) {
                openAccountBtn.addEventListener('click', () => {
                    openModal(registerModal);
                });
            }

            // 关闭登录模态框
            if (closeLoginModal) {
                closeLoginModal.addEventListener('click', () => {
                    closeModal(loginModal);
                });
            }

            // 关闭注册模态框
            if (closeRegisterModal) {
                closeRegisterModal.addEventListener('click', () => {
                    closeModal(registerModal);
                });
            }

            // 切换到注册
            if (switchToRegister) {
                switchToRegister.addEventListener('click', () => {
                    closeModal(loginModal);
                    setTimeout(() => {
                        openModal(registerModal);
                    }, 300);
                });
            }

            // 切换到登录
            if (switchToLogin) {
                switchToLogin.addEventListener('click', () => {
                    closeModal(registerModal);
                    setTimeout(() => {
                        openModal(loginModal);
                    }, 300);
                });
            }

            // 点击模态框外部关闭
            if (loginModal) {
                loginModal.addEventListener('click', (e) => {
                    if (e.target === loginModal) {
                        closeModal(loginModal);
                    }
                });
            }

            if (registerModal) {
                registerModal.addEventListener('click', (e) => {
                    if (e.target === registerModal) {
                        closeModal(registerModal);
                    }
                });
            }

            // 打开模态框函数
            function openModal(modal) {
                if (modal) {
                    modal.classList.add('active');
                    document.body.style.overflow = 'hidden'; // 禁止背景滚动
                }
            }

            // 关闭模态框函数
            function closeModal(modal) {
                if (modal) {
                    modal.classList.remove('active');
                    document.body.style.overflow = ''; // 恢复背景滚动

                    // 清除表单错误
                    const formGroups = modal.querySelectorAll('.form-group');
                    formGroups.forEach(group => {
                        group.classList.remove('error');
                    });
                }
            }

            // 表单验证
            const loginForm = document.getElementById('login-form');
            const registerForm = document.getElementById('register-form');

            if (loginForm) {
                loginForm.addEventListener('submit', (e) => {
                    e.preventDefault();
                    validateLoginForm();
                });
            }

            if (registerForm) {
                registerForm.addEventListener('submit', (e) => {
                    e.preventDefault();
                    validateRegisterForm();
                });
            }

            function validateLoginForm() {
                let isValid = true;
                const username = document.getElementById('login-username').value.trim();
                const password = document.getElementById('login-password').value.trim();

                // 验证用户名
                if (username === '') {
                    showError('login-username', '请输入用户名或手机号');
                    isValid = false;
                } else {
                    hideError('login-username');
                }

                // 验证密码
                if (password === '') {
                    showError('login-password', '请输入密码');
                    isValid = false;
                } else if (password.length < 6) {
                    showError('login-password', '密码长度不能少于6位');
                    isValid = false;
                } else {
                    hideError('login-password');
                }

                if (isValid) {
                    // 表单验证通过，这里可以添加登录逻辑
                    alert('登录成功！即将跳转到个人中心...');
                    closeModal(loginModal);
                    // 标记用户已登录
                    localStorage.setItem('isLoggedIn', 'true');
                    // 更新导航栏状态
                    updateNavStatus();
                }
            }

            function validateRegisterForm() {
                let isValid = true;
                const username = document.getElementById('register-username').value.trim();
                const phone = document.getElementById('register-phone').value.trim();
                const password = document.getElementById('register-password').value.trim();
                const confirmPassword = document.getElementById('register-confirm-password').value.trim();

                // 验证用户名
                if (username === '') {
                    showError('register-username', '请输入用户名');
                    isValid = false;
                } else if (username.length < 2) {
                    showError('register-username', '用户名长度不能少于2位');
                    isValid = false;
                } else {
                    hideError('register-username');
                }

                // 验证手机号
                const phoneRegex = /^1[3-9]\d{9}$/;
                if (phone === '') {
                    showError('register-phone', '请输入手机号');
                    isValid = false;
                } else if (!phoneRegex.test(phone)) {
                    showError('register-phone', '请输入有效的手机号');
                    isValid = false;
                } else {
                    hideError('register-phone');
                }

                // 验证密码
                if (password === '') {
                    showError('register-password', '请输入密码');
                    isValid = false;
                } else if (password.length < 6) {
                    showError('register-password', '密码长度不能少于6位');
                    isValid = false;
                } else {
                    hideError('register-password');
                }

                // 验证确认密码
                if (confirmPassword === '') {
                    showError('register-confirm-password', '请确认密码');
                    isValid = false;
                } else if (confirmPassword !== password) {
                    showError('register-confirm-password', '两次输入的密码不一致');
                    isValid = false;
                } else {
                    hideError('register-confirm-password');
                }

                if (isValid) {
                    // 表单验证通过，这里可以添加注册逻辑
                    alert('注册成功！即将跳转到登录页面...');
                    closeModal(registerModal);
                    setTimeout(() => {
                        openModal(loginModal);
                    }, 300);
                }
            }

            function showError(inputId, message) {
                const inputElement = document.getElementById(inputId);
                if (inputElement) {
                    const formGroup = inputElement.closest('.form-group');
                    const errorMessage = formGroup.querySelector('.error-message');

                    if (formGroup && errorMessage) {
                        formGroup.classList.add('error');
                        errorMessage.textContent = message;
                    }
                }
            }

            function hideError(inputId) {
                const inputElement = document.getElementById(inputId);
                if (inputElement) {
                    const formGroup = inputElement.closest('.form-group');
                    if (formGroup) {
                        formGroup.classList.remove('error');
                    }
                }
            }

            // 检查用户是否已登录
            function checkLoginStatus() {
                return localStorage.getItem('isLoggedIn') === 'true';
            }

            // 更新导航栏状态
            function updateNavStatus() {
                const isLoggedIn = checkLoginStatus();
                const btnGroup = document.querySelector('.btn-group');

                if (isLoggedIn) {
                    // 用户已登录，显示用户名和退出按钮
                    if (btnGroup) {
                        btnGroup.innerHTML = `
                            <span class="username" style="margin-right: 10px;">欢迎，用户</span>
                            <a href="#" id="logout-btn" class="btn-register">退出</a>
                        `;

                        // 添加退出按钮事件
                        const logoutBtn = document.getElementById('logout-btn');
                        if (logoutBtn) {
                            logoutBtn.addEventListener('click', () => {
                                localStorage.removeItem('isLoggedIn');
                                updateNavStatus();
                                showToast('已成功退出登录');
                            });
                        }
                    }
                } else {
                    // 用户未登录，显示登录注册按钮
                    if (btnGroup) {
                        btnGroup.innerHTML = `
                            <a href="#" class="btn-login">登录</a>
                            <a href="#" class="btn-register">注册</a>
                        `;

                        // 重新绑定登录注册按钮事件
                        const loginBtn = document.querySelector('.btn-login');
                        const registerBtn = document.querySelector('.btn-register');

                        if (loginBtn) {
                            loginBtn.addEventListener('click', () => {
                                openModal(loginModal);
                            });
                        }

                        if (registerBtn) {
                            registerBtn.addEventListener('click', () => {
                                openModal(registerModal);
                            });
                        }
                    }
                }
            }

            // 初始更新导航栏状态
            updateNavStatus();

            // 为基础服务添加点击事件
            const serviceItems = document.querySelectorAll('.service .item');
            serviceItems.forEach(item => {
                item.addEventListener('click', () => {
                    if (!checkLoginStatus()) {
                        showToast('请先登录');
                        setTimeout(() => {
                            openModal(loginModal);
                        }, 1000);
                    } else {
                        // 用户已登录，可以执行相应操作
                        const serviceName = item.querySelector('h3').textContent;
                        showToast(`正在进入${serviceName}页面...`);
                        // 这里可以添加跳转到对应服务页面的逻辑
                    }
                });
            });

            // 为导航菜单添加点击事件
            const navLinks = document.querySelectorAll('.nav .menu a');
            navLinks.forEach(link => {
                // 排除"基础服务"链接，因为它只是滚动到当前页面的服务部分
                if (link.getAttribute('href') !== '#service') {
                    link.addEventListener('click', (e) => {
                        if (!checkLoginStatus()) {
                            e.preventDefault(); // 阻止默认跳转行为
                            showToast('请先登录');
                            setTimeout(() => {
                                openModal(loginModal);
                            }, 1000);
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <div class="logo">
            <i class="fa fa-university" style="font-size:24px;color:#007bff;"></i>
            <span>安心银行</span>
        </div>
        <div class="menu">
            <a href="#service">基础服务</a>
            <a href="#">金融产品</a>
            <a href="#">关于我们</a>
            <a href="#">联系我们</a>
        </div>
        <div class="btn-group">
            <a href="#" class="btn-login">登录</a>
            <a href="#" class="btn-register">注册</a>
        </div>
    </div>

    <!-- banner 区域 -->
    <div class="banner">
        <div class="text">
            <h1>智能金融 安心相伴</h1>
            <p>安心银行提供全方位的金融服务，让您的财富管理更加智能、安全和便捷。</p>
            <a href="#" class="btn btn-open">立即开户</a>
            <a href="#service" class="btn btn-more">了解更多</a>
        </div>
        <div class="img">
            <img src="https://picsum.photos/400/300?random=1" alt="业务展示">
        </div>
    </div>

    <!-- 基础服务区域 -->
    <div class="service" id="service">
        <h2 class="reveal">基础服务</h2>
        <p class="reveal">涵盖日常常用金融操作，满足您的基础需求</p>
        <div class="list">
            <div class="item reveal" style="transition-delay: 0.1s;">
                <i class="fa fa-exchange"></i>
                <h3>快捷转账</h3>
                <p>支持行内、跨行快速转账，实时到账，操作简便。</p>
            </div>
            <div class="item reveal" style="transition-delay: 0.2s;">
                <i class="fa fa-money"></i>
                <h3>账户查询</h3>
                <p>随时查看账户余额、交易明细，掌握资金动态。</p>
            </div>
            <div class="item reveal" style="transition-delay: 0.3s;">
                <i class="fa fa-credit-card"></i>
                <h3>在线还款</h3>
                <p>绑定信用卡，一键完成还款，避免逾期烦恼。</p>
            </div>
            <div class="item reveal" style="transition-delay: 0.4s;">
                <i class="fa fa-file-text"></i>
                <h3>流水打印</h3>
                <p>在线申请交易流水，可下载或邮寄纸质凭证。</p>
            </div>
            <div class="item reveal" style="transition-delay: 0.5s;">
                <i class="fa fa-user"></i>
                <h3>信息修改</h3>
                <p>修改个人资料、手机号、登录密码等信息。</p>
            </div>
            <div class="item reveal" style="transition-delay: 0.6s;">
                <i class="fa fa-lock"></i>
                <h3>账户挂失</h3>
                <p>账户异常时快速挂失，保障资金安全。</p>
            </div>
        </div>
    </div>

    <!-- 登录模态框 -->
    <div id="login-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>用户登录</h3>
                <span id="close-login-modal" class="close-modal">&times;</span>
            </div>
            <div class="modal-body">
                <form id="login-form">
                    <div class="form-group">
                        <label for="login-username">用户名/手机号</label>
                        <input type="text" id="login-username" placeholder="请输入用户名或手机号">
                        <div class="error-message"></div>
                    </div>
                    <div class="form-group">
                        <label for="login-password">密码</label>
                        <input type="password" id="login-password" placeholder="请输入密码">
                        <div class="error-message"></div>
                    </div>
                    <div class="form-group" style="display: flex; justify-content: space-between; align-items: center;">
                        <label class="checkbox-label">
                            <input type="checkbox"> 记住我
                        </label>
                        <a href="#" style="font-size: 14px; color: #007bff;">忘记密码?</a>
                    </div>
                    <button type="submit" class="btn-submit">登录</button>
                </form>
            </div>
            <div class="form-footer">
                还没有账号? <a id="switch-to-register" href="#">立即注册</a>
            </div>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="register-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>用户注册</h3>
                <span id="close-register-modal" class="close-modal">&times;</span>
            </div>
            <div class="modal-body">
                <form id="register-form">
                    <div class="form-group">
                        <label for="register-username">用户名</label>
                        <input type="text" id="register-username" placeholder="请输入用户名">
                        <div class="error-message"></div>
                    </div>
                    <div class="form-group">
                        <label for="register-phone">手机号</label>
                        <input type="tel" id="register-phone" placeholder="请输入手机号">
                        <div class="error-message"></div>
                    </div>
                    <div class="form-group">
                        <label for="register-password">密码</label>
                        <input type="password" id="register-password" placeholder="请输入密码">
                        <div class="error-message"></div>
                    </div>
                    <div class="form-group">
                        <label for="register-confirm-password">确认密码</label>
                        <input type="password" id="register-confirm-password" placeholder="请再次输入密码">
                        <div class="error-message"></div>
                    </div>
                    <button type="submit" class="btn-submit">注册</button>
                </form>
            </div>
            <div class="form-footer">
                已有账号? <a id="switch-to-login" href="#">立即登录</a>
            </div>
        </div>
    </div>
</body>
</html>